<template>
  <a-modal
      :footer="null"
      :maskClosable="false"
      :title="title"
      :visible="visible"
      :width="720"
      @cancel="handleCancel"
  >
    <a-descriptions :column="2" bordered>
      <a-descriptions-item :label="'通知状态'" :span="2">
        <a-tag :color="(Status[detailData.status] ||  {color:''}).color">
          {{ (Status[detailData.status] || {name: ''}).name }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item :label="'商户订单编号'" :span="2">
        <a-tag>{{ detailData.merchantOrderId }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item v-if="detailData.merchantRefundId" :label="'商户退款编号'" :span="2">
        <a-tag>{{ detailData.merchantRefundId }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item v-if="detailData.merchantTransferId" :label="'商户转账编号'" :span="2">
        <a-tag>{{ detailData.merchantTransferId }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item :label="'应用编号'">{{ detailData.appId }}</a-descriptions-item>
      <a-descriptions-item :label="'应用名称'">{{ detailData.appName }}</a-descriptions-item>
      <a-descriptions-item :label="'关联编号'">{{ detailData.dataNo }}</a-descriptions-item>
      <a-descriptions-item :label="'通知类型'">
        <a-tag :color="(Type[detailData.type] ||  {color:''}).color">
          {{ (Type[detailData.type] || {name: ''}).name }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item :label="'通知次数'">{{ detailData.notifyTimes }}</a-descriptions-item>
      <a-descriptions-item :label="'最大通知次数'">{{ detailData.maxNotifyTimes }}</a-descriptions-item>
      <a-descriptions-item :label="'最后通知时间'">{{ detailData.lastExecuteTime | moment }}</a-descriptions-item>
      <a-descriptions-item :label="'下次通知时间'">{{ detailData.nextNotifyTime | moment }}</a-descriptions-item>
      <a-descriptions-item :label="'创建时间'">{{ detailData.creationTime | moment }}</a-descriptions-item>
    </a-descriptions>
    <a-divider/>
    <a-descriptions :column="1" layout="vertical">
      <a-descriptions-item :label="'回调日志'">
        <a-table :dataSource="detailData.logs" :pagination="false" rowKey="id">
          <a-table-column key="id" align="center" dataIndex="id" title="日志编号"/>
          <a-table-column key="status" align="center" dataIndex="status" title="通知状态">
            <template #default="text">
              <a-tag :color="(Status[text] ||  {color:''}).color">
                {{ (Status[text] || {name: ''}).name }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column key="notifyTimes" align="center" dataIndex="notifyTimes" title="通知次数"/>
          <a-table-column key="lastExecuteTime" align="center" dataIndex="lastExecuteTime" title="通知时间" width="180">
            <template #default="text">
              {{ text | moment }}
            </template>
          </a-table-column>
          <a-table-column key="response" align="center" dataIndex="response" title="响应结果"/>
        </a-table>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script>
import * as PayNotifyApi from '@/api/pay/notify'
import PayNotifyStatusEnum from "@/common/enum/pay/PayNotifyStatusEnum";
import PayNotifyTypeEnum from "@/common/enum/pay/PayNotifyTypeEnum";

export default {
  name: 'NotifyDetail',
  data() {
    return {
      title: '通知详情',
      // modal(对话框)是否可见
      visible: false,
      detailData: {
        logs: [],
      },
    }
  },
  computed: {
    Status() {
      return PayNotifyStatusEnum
    },
    Type() {
      return PayNotifyTypeEnum
    }
  },
  methods: {
    /**
     * 打开弹窗
     * @param {number} id 通知任务编号
     */
    async open(id) {
      try {
        this.detailData = await PayNotifyApi.detail(id)
        if (!this.detailData.logs) this.detailData.logs = []
        this.visible = true
      } catch (e) {
        this.$message.error("获取通知详情失败，请稍后再试")
      }
    },
    // 关闭对话框事件
    handleCancel() {
      this.visible = false
    },
  }
}
</script>